<!--
 * @Author: liangkun 2669681641@qq.com
 * @Date: 2023-08-22 14:39:04
 * @LastEditors: liangkun 2669681641@qq.com
 * @LastEditTime: 2023-08-22 18:00:34
 * @FilePath: \radiation-hygiene-fe\src\components\mSelect\index.vue
 * @Description:
 *
 * Copyright (c) 2023 by ${git_name_email}, All Rights Reserved.
-->
<template>
  <el-select
    v-bind="_attrs"
    style="width: 100%"
    remote
    :loading="loading"
    :remote-method="remoteOrg"
    v-selectScroll="handleScroll"
    v-on="new$listeners"
  >
    <el-option
      v-for="(item, index) in lists"
      :key="item[lists_key] || index"
      :label="`${item[lists_label]}${lists_vice_label && `(${item[lists_vice_label]})`}`"
      :value="item[lists_value]"
    >
    </el-option>
  </el-select>
</template>

<script>
/**
 * dimStr 解决展示的时候 所接收的id不为第一页 回显问题
 */
export default {
  name: 'mSelect',
  props: {
    lists: { // 列表数据
      type: Array,
      default: () => []
    },
    lists_label: {
      type: String,
      default: 'label'
    },
    lists_value: {
      type: String,
      default: 'value'
    },
    lists_key: {
      type: String,
      default: 'value'
    },
    lists_vice_label: {
      type: String,
      default: ''
    },
    pageNum: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 20
    },
    total: {
      type: Number,
      default: 0
    }
  },
  computed: {
    _attrs() {
      let attrs = { ...this.$attrs }
      return attrs
    },
    new$listeners() {
      return Object.assign(this.$listeners, {
       //在这里覆盖原有的业务逻辑事件
       focus: this.remoteOrg.bind(this, '')
      }) || {}
    },
  },
  watch: {
    lists: {
      handler(val) {
        if (val) {
          this.mlists = val
        }
      },
      immediate: true,
    }
  },
  data() {
    return {
      loading: false,
      mLists: [],
      queryData:{ // 查询数据
        queryName: '', //模糊查询名称
        pageNum: this.pageNum, //页码
        pageSize: this.pageSize,//每页展示的条数
      },
    }
  },
  created() {
    this.$emit('handleChange', {
      type: 'first',
      ...this.queryData,
      queryName: this._attrs?.dimStr || ''
    })
    this._attrs.dimStr = ''
  },
  methods: {
    // 触发搜索 初始化页码 调用搜索
    remoteOrg(query) {
      console.log('搜索' + query);
      this.loading = true;
      this.queryData.pageNum = 1
      if (query != '') {
        this.queryData.queryName = query ;
      } else {
        this.queryData.queryName = '' ;
      }
      this.$emit('handleChange', {
        type: 'reset',
        ...this.queryData
      })
      this.loading = false;
    },
    // 下拉框无限滚动
    handleScroll (down) {
      if (!this.loading){
        this.loading = true ;
        if (down && this.total > this.queryData.pageNum*this.queryData.pageSize){
          this.queryData.pageNum += 1;
        }else if (!down &&  this.queryData.pageNum > 1){
          this.queryData.pageNum -= 1;
        }
        // 触发滚动  父组件调用接口
        this.$emit('handleChange', {
          type: 'scroll',
          ...this.queryData
        })
        this.loading = false;
      }
    },
  }
}
</script>

<style>

</style>
